/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Modal,
    TextInput,
    Alert,
    ToastAndroid,
    TouchableOpacity,
    ProgressBarAndroid,
    KeyboardAvoidingView ,
} from 'react-native';
import Storage from 'react-native-storage';
import getDate from '../config/fetch'
import LoginButton from '../ui/loginButton';
import Loading from '../ui/loading'
import LoginInput from '../ui/loginInput';

var Dimensions = require('Dimensions');
import Config from "../config/config"
import pxToDp from '../config/pxToDp'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default class PhoneLoginScene extends Component {
    constructor(props){
        super(props)
        this.state = {
            phone:null,
            password:null,
            modalVisible: false,
        }
        
    }
    helper(navi){
        fetch(Config.Url + "?m=User&c=Api&a=login",{
            method: 'POST', 
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'phone=' + this.state.phone + '&password=' + this.state.password
        }).then((response)=>{
            response.json().then((content)=>{
                console.log(content)
                if (content.state.code == 0){
                    //全局
                    global.uid = content.data.uid
                    storage.save({
                        key: 'loginState', // 注意:请不要在key中使用_下划线符号!
                        data: {
                            userId: content.data.uid,
                            token: content.data.token,
                        },
                    });
                    storage.save({
                        key: 'userInfo', // 注意:请不要在key中使用_下划线符号!
                        id: 1,
                        data: {
                            phone: content.data.phone,                            
                            nickname: content.data.nickname,
                            headsmall: content.data.headsmall == '' ? '../imgs/pic.jpg' : content.data.headsmall,
                        },
                    });
                    this.setState({modalVisible:!this.state.modalVisible})
                    this.props.navigation.replace('homeScene')
                }else{
                    this.setState({modalVisible:!this.state.modalVisible})
                    ToastAndroid.show(content.state.msg, ToastAndroid.SHORT);
                }
            })
        })
    }
    render() {
        const { navigate } = this.props.navigation;
        login = () =>{
            if (this.state.phone != null && this.state.password != null) {
                //loading
                this.setState({modalVisible:!this.state.modalVisible})
                this.helper(this.props.navigation)
            }else{
                ToastAndroid.show('请填写完整', ToastAndroid.SHORT);                
            }
        }
        return (
            <View style={styles.all}>
                {
                    this.state.modalVisible == true ? (
                        <Loading notice={"登录中"} visible={this.state.modalVisible} requestClose={()=>{
                            this.setState({modalVisible:!this.state.modalVisible})
                        }}/>
                    ):(null)
                }
                
                <View style={{height:55,flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderColor:'#f9f9f9'}}>
                    < TouchableOpacity onPress = {
                        ()=>{
                            this.props.navigation.replace('accountLogin')
                        }
                    } >
                        <View style={{width:60,alignItems:'center',justifyContent:'center'}}>
                            <MaterialIcons  name='keyboard-arrow-left' size={35}/>
                        </View>
                    </TouchableOpacity>
                    
                    <View style={{width:60,height:55,justifyContent:'center'}}>
                        <Text style={{alignSelf:'center',fontSize:18 }}>
                            登陆
                        </Text>
                    </View>
                </View>
                <View style={styles.container}>
                    {/* <View style={styles.one}>
                        <Text style={styles.title}>
                            登陆
				        </Text>
                    </View> */}
                    <View style={styles.selectCountry}>
                        <View style={styles.center}>
                            <View style={styles.leftText}>
                                <Text>
                                    中国
                                </Text>
                            </View>
                            <View style={styles.rightText}>
                                <MaterialIcons  name='chevron-right' size={25}/>

                            </View>
                        </View>
                    </View>
                    <View style={styles.square}>
                    </View>
                    <View style={styles.twoFirstChild}>

                            <LoginInput
                                cont="+86"
                                changeText={(text)=>{
                                    this.setState({phone:text})
                                }}
                                secure={false}
                                placeholder="请填写手机号">
                                
                            </LoginInput>
                    </View>
                    <View style={styles.twoFirstChild}>

                            <LoginInput
                                cont="输入密码"
                                changeText={(text)=>{
                                    this.setState({password:text})
                                }}
                                secure={true}
                                placeholder = "请填写密码" >
                                
                            </LoginInput>
                    </View>

                    <View style={styles.three}>
                        <LoginButton
                            btnText="登陆"
                            login={login.bind(this)}>
                        </LoginButton>
                    </View>
                    {/* <View style={styles.two}>
                        <View style={styles.twoFirstChild}>

                            <LoginInput
                                cont="手机号"
                                changeText={(text)=>{
                                    this.setState({phone:text})
                                }}
                                secure={false}
                                placeholder="请填写手机号">
                                
                            </LoginInput>
                            <LoginInput
                                cont="密码&nbsp;"
                                changeText={(text)=>{
                                    this.setState({password:text})
                                }}
                                secure={true}
                                placeholder="请填写密码">

                            </LoginInput>
                        </View>


                    </View>
                    
                    <View style={styles.three}>
                        <LoginButton
                            btnText="登陆"
                            login={login.bind(this)}>
                        </LoginButton>
                    </View> */}
                   

                </View>
            </View>
            
        );
    }
}


const styles = StyleSheet.create({
    all:{
        backgroundColor: '#fff',
        flex:1,
    },
    container: {
    },
    one: {
        height:50,
        justifyContent:'center',
        backgroundColor: "#efefef"
    },
    title: {

        fontSize: 18,
        textAlign: 'center',
        alignItems: 'center',
        color: '#333333',
    },
    selectCountry:{
        marginLeft:10,
        paddingTop:15,
        paddingBottom:15,
        borderBottomWidth:1,
        borderColor:'rgb(220,220,220)',
    },
    center:{
        flexDirection:'row',
    },
    square:{
        width:15,
        height:15,
        borderBottomWidth:1,
        borderRightWidth:1,
        borderColor: 'rgb(220,220,220)',
        transform: [{
            rotate: '45deg'
        }],
        position: 'absolute',
        left:pxToDp(68),
        top:49,
        backgroundColor: '#fff',

    },
    leftText:{
        width:pxToDp(130),
        alignItems:'center',
        justifyContent:'center',
    },
    rightText:{
        width: pxToDp(460),
        alignItems: 'flex-end'
    },
    twoFirstChild:{
        width: pxToDp(630),
        marginLeft:10,
    },
    three:{
        height:50,
        marginTop:50,
        alignSelf:'center',
        width:pxToDp(400),
    }
});
